<template>
  <div class="question-container">
    <el-card>
      <!-- 新增试题按钮 -->
      <div class="btn_wrapper">
        <el-button
          type="success"
          size="small"
          @click="$router.push('/questions/new')"
        >
          <i class="el-icon-edit"></i>
          新增试题
        </el-button>
      </div>
      <!-- 筛选/搜索组件 -->
      <div>
        <questions-search
          :getList="getList"
          :requestParams.sync="requestParams"
        />
      </div>
      <!-- 标签页 -->
      <el-tabs
        v-model="requestParams.chkState"
        type="card"
        @tab-click="handleClick"
      >
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="待审核" name="0"></el-tab-pane>
        <el-tab-pane label="已审核" name="1"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
      </el-tabs>
      <!-- 消息的提示文案 -->
      <div style="margin-bottom: 15px">
        <el-alert
          :title="`数据一共${total}条`"
          type="info"
          show-icon
          :closable="false"
        >
        </el-alert>
      </div>
      <!-- 表格 -->
      <div>
        <el-table :data="formData" v-loading="tableLoading">
          <el-table-column
            label="试题编号"
            prop="number"
            width="120px"
          ></el-table-column>
          <el-table-column label="学科" prop="subject"></el-table-column>
          <el-table-column label="目录" prop="catalog"></el-table-column>
          <el-table-column label="题型">
            <template #default="{ row }">
              {{
                questionType.find((item) => item.value === +row.questionType)
                  .label
              }}
            </template>
          </el-table-column>
          <el-table-column label="题干" width="280px">
            <template #default="{ row }">
              <div v-html="row.question"></div>
            </template>
          </el-table-column>
          <el-table-column label="录入时间" width="200px">
            <template #default="{ row }">
              {{ row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column label="难度">
            <template #default="{ row }">
              {{
                difficulty.find((item) => item.value === +row.difficulty).label
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="录入人"
            prop="creator"
            width="100px"
          ></el-table-column>
          <el-table-column label="审核状态"
            ><template #default="{ row }">
              {{ row.chkState | state_chk }}
            </template>
          </el-table-column>
          <el-table-column label="审核意见" prop="chkRemarks"></el-table-column>
          <el-table-column label="审核人" prop="chkUser"></el-table-column>
          <el-table-column label="发布状态">
            <template #default="{ row }">
              {{ row | state_pub }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px" fixed="right">
            <template #default="{ row }">
              <el-button
                size="small"
                type="text"
                @click="openPreviewDialog(row)"
                >预览</el-button
              >
              <el-button
                size="small"
                type="text"
                @click="showExamineDialog(row)"
                :disabled="row.chkState !== 0"
                >审核</el-button
              >
              <el-button
                size="small"
                type="text"
                @click="$router.push(`/questions/new?id=${row.id}`)"
                :disabled="row.publishState === 1"
                >修改</el-button
              >
              <el-button
                v-if="!row.publishState"
                size="small"
                type="text"
                @click="togglePublish(row, 1)"
                >上架</el-button
              >
              <el-button
                v-else
                size="small"
                type="text"
                @click="togglePublish(row, 0)"
                >下架</el-button
              >
              <el-button
                size="small"
                type="text"
                @click="DelQuestion(row.id)"
                :disabled="row.publishState === 1"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 页码 -->
      <div>
        <el-pagination
          style="margin-top: 20px; text-align: right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="requestParams.page"
          :page-sizes="[3, 5, 8]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <questions-preview
      ref="questionPreview"
      :data="questionInfo"
    ></questions-preview>
    <!-- 审核对话框 -->
    <el-dialog
      :visible="isExamine"
      title="题目审核"
      @close="handleColse"
      width="380px"
    >
      <el-form>
        <el-form-item>
          <el-radio v-model="examineInfo.chkState" :label="1">通过</el-radio>
          <el-radio v-model="examineInfo.chkState" :label="2">不通过</el-radio>
        </el-form-item>
        <el-form-item>
          <el-input type="textarea" v-model="examineInfo.chkRemarks"></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="handleColse">取消</el-button>
        <el-button type="primary" @click="submitExamine">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import QuestionsSearch from '../components/questions-search.vue'
import QuestionsPreview from '../components/questions-preview.vue'
import {
  choice as questionList,
  remove as questionDel,
  choicePublish,
  choiceCheck
} from '@/api/hmmm/questions.js'
import { questionType, difficulty, chkType } from '@/api/hmmm/constants.js'
export default {
  name: 'QuestionsChoice',
  components: {
    QuestionsSearch,
    QuestionsPreview
  },
  data () {
    return {
      total: 0,
      // 表格
      formData: [],
      tableLoading: false,
      // 请求
      requestParams: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        page: 1,
        pagesize: 5,
        chkState: 'all'
      },
      examineInfo: {
        chkState: 1,
        chkRemarks: ''
      },
      // constants
      questionType,
      difficulty,
      chkType,
      // dialog
      questionInfo: {},
      // 审核dialog
      isExamine: false,
      row: {}
    }
  },
  filters: {
    state_chk (val) {
      if (val === 0) return '待审核'
      if (val === 1) return '已审核'
      if (val === 2) return '已拒绝'
    },
    state_pub (row) {
      if (row.publishState === 1 && row.chkState === 1) {
        return '已发布'
      }
      if (row.publishState === 0 && row.chkState === 1) {
        return '已下架'
      }
      return '待发布'
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 获取基本列表
    async getList (requestParams) {
      this.tableLoading = true
      if (requestParams) {
        this.requestParams = requestParams
      }
      const params = { ...this.requestParams }
      if (params.chkState === 'all') {
        params.chkState = null
      }

      const {
        data: { items, counts }
      } = await questionList(params)
      console.log(items)
      this.formData = items
      this.total = counts
      this.tableLoading = false
    },
    // 每页几条信息
    handleSizeChange (val) {
      console.log('每页几条信息' + val)
      this.requestParams.pagesize = val
      this.requestParams.page = 1
      this.getList()
    },
    // 第几页
    handleCurrentChange (val) {
      console.log('第几页' + val)
      this.requestParams.page = val
      this.getList()
    },
    // 预览
    openPreviewDialog (row) {
      this.questionInfo = row
      this.$nextTick(() => {
        this.$refs.questionPreview.open()
      })
    },
    // 删除
    DelQuestion (id) {
      this.$confirm('确认删除该项吗？', '提示')
        .then(async () => {
          const {
            data: { success }
          } = await questionDel({ id })
          if (success) this.$message.success('删除试题成功')
          if (this.formData.length === 1 && this.requestParams.page > 1) {
            this.requestParams.page--
          }
          this.getList()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 上下架
    togglePublish (row, number) {
      this.$confirm('确认上架该题目吗？', '提示', { type: 'warning' })
        .then(async () => {
          const {
            data: { success }
          } = await choicePublish({ id: row.id, publishState: number })
          if (success) this.$message.success('操作已成功')
          this.getList()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 审核
    showExamineDialog (row) {
      this.isExamine = true
      this.row = row
    },
    async submitExamine () {
      const { success } = await choiceCheck({ id: this.row.id, ...this.examineInfo })
      if (success) this.$message.success('审核已成功')
      this.handleColse()
      this.getList()
    },
    handleColse () {
      this.isExamine = false
      this.examineInfo = {
        chkState: 1,
        chkRemarks: ''
      }
    },
    // 切换标签页
    handleClick (tab, e) {
      this.requestParams.page = 1
      this.getList()
    }
  }
}
</script>

<style scoped lang='scss'>
.question-container {
  padding: 0 10px;
  margin: 10px 0;
  .btn_wrapper {
    text-align: right;
    margin-bottom: 15px;
  }
}
</style>
